<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<title></title>
		<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="js/index.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="js/reconnecting-websocket.min.js"></script>
		<script src="js/emoji.js"></script>
	</head>

	<body>
		
		<div class="main">
			<div class="left">
				<div id="msg" class="ul-box">
					<ul class="after">
						<li>
							<div class="head">
								<div class="imgbox">
									<img src="img/bg.jpg" />
								</div>
								<div class="name">
									LXD-Mars
								</div>
								<div class="time">
									20:55:20.20
								</div>
							</div>
							<div class="content">
								<img src="img/bg.jpg" />
							</div>
						</li>
					</ul>
				</div>
				<div id="result" class="ul-box">
					<div class="results">
						<p>节目比赛投票结果</p>
						<ul>
							<li>
								<div class="num">
								 100票
								</div>
								<div class="meter">
									<div class="value">
									</div>
								</div>
								<span>节目一</span>
							</li>
							<li>
								<div class="num">
									100票
								</div>
								<div class="meter">
									<div class="value">
									</div>
								</div>
								<span>节目二</span>
							</li>
							<li>
								<div class="num">
									100票
								</div>
								<div class="meter">
									<div class="value">
									</div>
								</div>
								<span>节目三</span>
							</li>
							<li>
								<div class="num">
									100票
								</div>
								<div class="meter">
									<div class="value">
									</div>
								</div>
								<span>节目四</span>
							</li>
						</ul>
					</div>
				</div>
				<div id="gameresult" class="ul-box">
					<div class="results">
						<p>游戏竞赛前十排行榜</p>
						<p>答案：<span>猪</span></p>
						<ul class="after">
							<li>
								<span>第一名：</span>
								<div class="imgbox">
									<img src="img/bg.jpg" />
								</div>
								<div class="name">
									LXD-Mars
								</div>
								<div class="time">
									20:55:20.20
								</div>
							</li>
							<li><span>第二名：</span><div class="imgbox">
									<img src="img/bg.jpg" />
								</div>
								<div class="name">
									LXD-Mars
								</div>
								<div class="time">
									20:55:20.20
								</div></li>
							<li><span>第三名：</span><div class="imgbox">
									<img src="img/bg.jpg" />
								</div>
								<div class="name">
									LXD-Mars
								</div>
								<div class="time">
									20:55:20.20
								</div></li>
							<li><span>第四名：</span><div class="imgbox">
									<img src="img/bg.jpg" />
								</div>
								<div class="name">
									LXD-Mars
								</div>
								<div class="time">
									20:55:20.20
								</div></li>
							<li><span>第五名：</span><div class="imgbox">
									<img src="img/bg.jpg" />
								</div>
								<div class="name">
									LXD-Mars
								</div>
								<div class="time">
									20:55:20.20
								</div></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="code">
					<img src="" />
				</div>
				<div class="cn">
					公众号二维码
				</div>
			</div>
		</div>
	</body>
    	<script type="text/javascript">
function getHost(){
	var host=window.location.host;
	 if(host.indexOf("80")==-1){
		host=host+":80";
	} 
	return host;
}
var  ws;
var  wsmanage;
var isShow=true;
var url="ws://119.23.71.112:8080/meeting/information";//文本
var urlmanage="ws://119.23.71.112:8080/meeting/manageation";

function onopenSocket(){
	var arrayList=new Array();
	if ('WebSocket' in window) {
        ws = new ReconnectingWebSocket(url);
        wsmanage = new ReconnectingWebSocket(urlmanage);
    } else if ('MozWebSocket' in window) {
        ws = new MozWebSocket(url);
        wsmanage = new MozWebSocket(urlmanage);
    } else {
        alert('WebSocket is not supported by this browser.');
        return;
    }
	wsmanage.onmessage=function (event){
		try{
		eval("var data="+event.data);
			
		}catch(e){
			var data=event.data;
		}
		
		//var data=event.data;
		if(data.type==1001){
			var content = data.content;
			content=emojiToString(content);
			var li = '<li><div class="head"><div class="imgbox"><img src="'+data.head+'"/></div><div class="name">'+data.name+'</div><div class="time">'+data.sendtime+'</div></div><div class="content">'+content+'</div></li>';
			$("#msg ul").append(li);
			$("#msg ul li:last-child").fadeIn(500);
			$("#msg ul li:last-child").css('display','block');
			$("#msg").animate({
				scrollTop: $("#msg ul").height() + 'px'
			},800);
			return ;
		}
		if(data.type==1002){
			var li = '<li><div class="head"><div class="imgbox"><img src="'+data.head+'"/></div><div class="name">'+data.name+'</div><div class="time">'+data.sendtime+'</div></div><div class="content"><img src="/meeting'+data.picurl+'"/></div></li>';
			$("#msg ul").append(li);
			$("#msg ul li:last-child").fadeIn(200);
			$("#msg ul li:last-child").css('display','block');
			$("#msg").animate({
				scrollTop: $("#msg ul").height() + 'px'
			},500);
		}
		if(data.type==2007){
			isShow=false;
			$("#msg ul").empty();
			arrayList=[];
		}
		if(data.type==2008){
			isShow=true;
		}
		if(data.type==2001){
			$("#result ul").html("");
			$.each(data.result,function(index,item){
				var voitResult="<li><div class='num'>"+item.size+"票</div><div class='meter'><div class='value'></div></div><span>"+item.name+"</span></li>";
				$("#result ul").append(voitResult);
				var meterlist=$("#result ul .meter:last-child").height();
				var code=((parseInt(item.resultCode)/data.sum)*100)+"%";
				$("#result ul .meter").eq(index).find(".value").css("height",code);
				
			});
			showVoid();
		}
		if(data.type==2005){
			$("#gameresult ul").html("");
			$("#gameresult #gemetitle").html(data.title);
			$("#gameresult #gameresultans").html(data.solution);
			$.each(data.result,function(index,item){
			var gameresult='<li><span>第'+(index+1)+'名：</span><div class="imgbox"><img src="'+item.head+'" /></div><div class="name">'+item.nickname+'</div><div class="time">'+item.createTime+'</div></li>';
			$("#gameresult ul").append(gameresult);
			})
			showGame();
		}
		if(data.type==2004){
			showPrompt(data.result);
		}
		if(data.type==3001){
			hideContent();
		}
	}
	setInterval(function(){
		if(arrayList.length!=0){
			if(isShow){
				var li= arrayList.shift();
				$("#msg ul").append(li);
				$("#msg ul li:last-child").fadeIn(500);
				$("#msg ul li:last-child").css('display','block');
				$("#msg").animate({
					scrollTop: $("#msg ul").height() + 'px'
				},800);
			}
		}
	},1000);
	ws.onmessage=function (event){
		try{
		eval("var data="+event.data);
			
		}catch(e){
			var data=event.data;
		}
		
		//var data=event.data;
		if(data.type==1001){
				if(isShow){
				var content = data.content;
				content=emojiToString(content);
				var li = '<li><div class="head"><div class="imgbox"><img src="'+data.head+'"/></div><div class="name">'+data.name+'</div><div class="time">'+data.sendtime+'</div></div><div class="content">'+content+'</div></li>';
				arrayList.push(li);
				}
				/* $("#msg ul").append(li);
				$("#msg ul li:last-child").fadeIn(500);
				$("#msg ul li:last-child").css('display','block');
				$("#msg").animate({
					scrollTop: $("#msg ul").height() + 'px'
				},800); */
				return ;
		}
		if(data.type==1002){
				if(isShow){
				var li = '<li><div class="head"><div class="imgbox"><img src="'+data.head+'"/></div><div class="name">'+data.name+'</div><div class="time">'+data.sendtime+'</div></div><div class="content"><img src="/meeting'+data.picurl+'"/></div></li>';
				arrayList.push(li);
				}
			
		}
		
		if(data.type==2001){
			$("#result ul").html("");
			$.each(data.result,function(index,item){
				var voitResult="<li><div class='num'>"+item.size+"票</div><div class='meter'><div class='value'></div></div><span>"+item.name+"</span></li>";
				$("#result ul").append(voitResult);
				var meterlist=$("#result ul .meter:last-child").height();
				var code=((parseInt(item.resultCode)/data.sum)*100)+"%";
				$("#result ul .meter").eq(index).find(".value").css("height",code);
				console.log(code);
			});
			showVoid();
		}
		if(data.type==2005){
			$("#gameresult ul").html("");
			$("#gameresult #gemetitle").html(data.title);
			$("#gameresult #gameresultans").html(data.solution);
			$.each(data.result,function(index,item){
			var gameresult='<li><span>第'+(index+1)+'名：</span><div class="imgbox"><img src="'+item.head+'" /></div><div class="name">'+item.nickname+'</div><div class="time">'+item.createTime+'</div></li>';
			$("#gameresult ul").append(gameresult);
			})
			showGame();
		}
		if(data.type==2004){
			showPrompt(data.result);
		}
		if(data.type==3001){
			hideContent();
		}
	}
}
//提示内容
function showPrompt(content){
	
}
//显示投票结果
function showVoid(){
	$('#msg').css('height','0');
	$('#gameresult').fadeOut(400,function(){$('#result').fadeIn(400);});
	
}

//显示游戏结果 
function showGame(){
   $('#msg').css('height','0');
   $('#result').fadeOut(400,function(){$('#gameresult').fadeIn(400);});
   
}
//隐藏内容
function hideContent(){
	$('#result').fadeOut(400);
	$('#gameresult').fadeOut(400);
	$('#msg').css('height','');
}
$(function(){
	onopenSocket();
	alert("1");
	$.ajax({
		type:"post",
		url:"http://119.23.71.112/meeting/management/getQrUrl.action",
		data:{},
		dataType:"json",
		success:function(data){
			if(data.code==00)
			{
				window.location.href="../admin/login.html";
			}
			else if(data.code==10)
			{
				showPrompt(data.msg);
			}
			else
			$(".code").attr("src",data.msg);
		}
	});
})
$(window).resize(function(){
	$("#msg").animate({
			scrollTop: $("#msg ul").height() + 'px'
		},0);
});
</script>
</html>